<template>
  <div class="rollbagadd baiduUe">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>新建组合券包</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="活动名称" :required="true">
              <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
              <div class="yb_margin lh16">建议名称由“店铺名+原总价+代金劵”组成</div>
            </el-form-item>
            <el-form-item label="活动时间" :required="true">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
            <el-form-item label="卡券组合" :required="true">
              <el-radio-group v-model="form.type">
                <el-radio label="1">品牌代金券</el-radio>
              </el-radio-group>
              <div class="flex" v-for="(item,index) in form.coupon" :key="index">
                <div>
                  <div>类型</div>
                  <div class="cusipw">
                    <el-select v-model="timeType" placeholder="请选择" disabled>
                      <el-option label="代金券" value="1"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="mar_l20">
                  <div>使用门槛</div>
                  <div class="cusipw">
                    <el-input v-model="item.fullMoney" placeholder="请输入金额" type="number">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
                <div class="mar_l20">
                  <div>券金额</div>
                  <div class="cusipw">
                    <el-input v-model="item.money" @input="priceChange" placeholder="请输入金额" type="number">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
                <div class="mar_l20">
                  <div>可用张数</div>
                  <div class="cusipw">
                    <el-input v-model="item.num" @input="priceChange" placeholder="请输入张数" type="number">
                      <template slot="append">张</template>
                    </el-input>
                  </div>
                </div>
                <el-button size="small" type="text" @click="delfullArr(index)" class="fon_12 mar_l20 mar_t20">删除</el-button>
              </div>
              <el-button v-show="form.coupon.length<10" type="text" @click="addfullArr" class="mar_t10">
                <Icon type="md-add" />添加代金券,最多10种
              </el-button>

              <div class="flex">
                <div>
                  <div>原总价</div>
                  <div class="cusipw">
                    <el-input v-model="form.price" disabled type="number">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
                <div class="mar_l20">
                  <div>现总售价</div>
                  <div class="cusipw">
                    <el-input v-model="form.money" placeholder="请输入金额" type="number">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
              </div>
              <div class="yb_margin lh16">原总价 = 券金额 * 可用张数，现总售价为顾客需付款金额</div>
            </el-form-item>
            <el-form-item label="封面图">
              <div class="uploadSource bor_de rel flex" v-if="form.icon">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                </label>
                <img :src="form.icon" @click="test(1)" class="wid" />
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
              <div class="yb_margin">建议尺寸： 800*800px</div>
            </el-form-item>
            <el-form-item label="展示图片">
              <div class="uploadSource bor_de rel flex" v-for="(item, index) in form.media" :key="index">
                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                  <i class="el-icon-check" :ref="`list1${index}`"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                </label>
                <img :src="item" @click="test(2)" class="wid img" />
              </div>
              <div class="uploadSource flex-center curs" @click="test(2)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <attachment-img ref="img2" type="imgs" @attachment="multigraph1"></attachment-img>
              <div class="yb_margin">建议尺寸： 800*800px</div>
            </el-form-item>
            <!--                        <el-form-item label="详情图片">-->
            <!--                            <div class="uploadSource bor_de rel flex" v-if="form.media">-->
            <!--                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">-->
            <!--                                    <i class="el-icon-check" ref="imgicon1"></i>-->
            <!--                                    <i class="el-icon-close" @click="deleteMultiImage(form.media,1)"></i>-->
            <!--                                </label>-->
            <!--                                <img :src="form.media" @click='test(1)' class="wid"/>-->
            <!--                            </div>-->
            <!--                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>-->
            <!--                                <i class="el-icon-plus fon_40 color_d9"></i>-->
            <!--                            </div>-->
            <!--                            <div class="yb_margin">建议尺寸： 800*800px</div>-->
            <!--                        </el-form-item>-->
            <el-form-item label="库存" :required="true">
              <el-input v-model="form.stock" placeholder="请输入库存"></el-input>
            </el-form-item>
            <el-form-item label="每人每日购买" :required="true">
              <el-input v-model="form.dayNum" placeholder="请输入份数" type="number">
                <template slot="append">份</template>
              </el-input>
            </el-form-item>
            <el-form-item label="有效期" :required="true">
              <span class="mar_lr10">购买后内</span>
              <el-input v-model="form.days" placeholder="请输入天数" type="number">
                <template slot="append">天</template>
              </el-input>
              <span class="mar_lr10">有效</span>
            </el-form-item>
            <el-form-item label="券说明">
              <baidu-ueditor :content="form.details" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是券包？" name="1">
              <div>券包是指多种优惠券打包销售，让用户以更优惠的价格买到更高的优惠。</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要做券包功能？" name="2">
              <div>券包对商家是一种营销手段，帮助商家引流、拉新，进一步带动销售。</div>
            </el-collapse-item>
            <el-collapse-item title="哪些用户可以购买券包" name="3">
              <div>满足条件的用户均可购买</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
  </div>
</template>
<script>
import { rollbagSave, rollbagInfo } from '@/api/plug';
import { changeDate } from '@/utils/index';
import attachmentImg from '@/plugins/attachment-img';
import baiduUeditor from '@/plugins/baidu-ueditor';

export default {
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
  },
  components: { attachmentImg, baiduUeditor },
  data() {
    return {
      form: {
        name: '',
        money: '',
        details: '',

        coupon: [
          {
            fullMoney: '',
            money: '',
            num: ''
          }
        ],
        type: '1',
        icon: '',
        media: [],
        price: 0,
        stock: '',
        dayNum: '',
        days: ''
      },
      timeType: '1',
      timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
      collapseName: ''
    };
  },
  methods: {
    addfullArr() {
      let fullObj = { fullMoney: '', money: '', num: '' };
      this.$set(this.form.coupon, this.form.coupon.length, fullObj);
      this.form.price = 0;
      this.form.coupon.forEach((item) => {
        this.form.price += Number(item.money) * Number(item.num);
      });
    },
    delfullArr(index) {
      this.radioTrue = true;
      this.$delete(this.form.coupon, index);
      this.form.price = 0;
      this.form.coupon.forEach((item) => {
        this.form.price += Number(item.money) * Number(item.num);
      });
    },
    priceChange() {
      this.form.price = 0;
      this.form.coupon.forEach((item) => {
        this.form.price += Number(item.money) * Number(item.num);
      });
    },
    getUeditor(content) {
      this.form.details = content;
    },
    async edit() {
      const { data } = await rollbagInfo({ id: this.id });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.startTime) {
        this.timeData = [data.startTime, data.endTime];
      }
      // this.form.coupon.forEach((item=>{
      //     this.form.price+= item.money*item.num;
      // }))
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.icon = url.str;
    },
    enterMultigraph(index, i = 0) {
      //多图删除，i是指文档中的第几个ref多图对象，index图片列表
      // console.log(this.$refs[`list${index}`][index],index)
      this.$refs[`list${i}${index}`][0].style.display = 'none';
    },
    leaveMultigraph(index, i = 0) {
      this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
    },
    multigraph1(url) {
      if (this.form.media && this.form.media.length > 0) {
        this.form.media = this.form.media.concat(url.arr);
      } else {
        this.form.media = url.arr;
      }
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form.media.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.icon = '';
            break;
        }
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.timeData) {
            this.form.startTime = changeDate(this.timeData[0]);
            this.form.endTime = changeDate(this.timeData[1]);
          }

          const { msg } = await rollbagSave(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.rollbagadd {
  .cusipw .el-input {
    width: 180px;
  }
}
.baiduUe {
  .time_item .el-input {
    width: 180px;
  }
}
</style>
